<template>
  <el-dialog v-loading="loading" class="os-dialog" v-if="dialog && dialog.visible" :title="dialog.title" :width="width"
             v-bind="otherProps"
             :visible="dialog.visible"
             @close="onClose" :append-to-body="appendToBody">
    <!-- 是否嵌套,嵌套的 Dialog 必须指定append-to-body属性并赋值为true-->
    <os-dialog v-if="!inside" :inside="true" append-to-body />
    <component :is="dialog.content" ref="content"></component>
    <div slot="footer" class="dialog-footer" v-if="dialog.options && dialog.options.btn">
      <os-button :disabled="mDisabled" v-bind="{type: b.type, icon: b.icon, text: b.text, loading: b.loading}"
                 v-for="(b, index) in dialog.options.btn" :key="index" @click="(cb) => onBtnClick(b, cb)"/>
    </div>
  </el-dialog>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'OsDialog',
  components: {
    OsDialog: () => import('./OsDialog.vue')
  },
  props: {
    inside: { type: Boolean, default: false },
    appendToBody: { type: Boolean, default: false }
  },
  data () {
    return {
      mDisabled: false,
      loading: false
    }
  },
  computed: {
    ...mapState(['insideDialog', 'outsideDialog']),
    dialog () {
      return this.inside ? this.insideDialog : this.outsideDialog
    },
    otherProps () {
      const { btn, onClose, ...otherProps } = this.dialog.options
      return otherProps
    },
    width () {
      // console.info(this.dialog.options.width + '------this.inside: ' + this.inside)
      if (this.dialog.options && this.dialog.options.width) {
        return this.dialog.options.width
      } else {
        return this.inside ? '60%' : '70%'
      }
    }
  },
  methods: {
    onClose () {
      if (this.dialog.visible) {
        this.dialog?.options?.onClose && this.dialog.options.onClose()
        this.$utils.hideDialog()
      }
    },
    onBtnClick (b, cb) {
      if (b.cb) {
        b.cb(cb)
      } else {
        this.onClose()
      }
    },
    disabled (val) {
      this.mDisabled = val
    },
    showLoading (loading) {
      this.loading = loading
    }
  }
}
</script>
